<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .content {
      width: 600px;
      height: 500px;
      background-color: rgb(245, 241, 241);
      margin: 50px auto;
    }

    h3 {
      margin-left: 20px;
      padding-top: 10px;
    }

    .container {
      margin-left: 220px;
      margin-top: -40px;
      width: 300px;
      display: flex;
      flex-wrap: wrap;
    }

    .container input {
      height: 20px;
      margin-top: 20px;
    }

    .container div {
      margin-top: 22px;
      margin-left: -95px;
      font-size: 14px;
      color: green;
      font-weight: bold;
    }

    .container span {
      padding-right: 130px;
      color: red;
    }

    .container .box {
      display: flex;
      margin-left: -12px;
    }

    .container .box1 {
      width: 20px;
      height: 20px;
      margin-top: 0px;
      margin-left: 0px;
      border-radius: 20px;
      border: 1px solid red;
    }

    .container .sp2 {
      padding-right: 0;
      color: black;
    }

    .container .last {
      width: 200px;
      height: 30px;
      background-color: green;
      margin-left: -10px;
      margin-top: 2px;
      font-size: 18px;
      color: white;
      text-align: center;
      line-height: 30px;
      cursor: pointer;
    }

    .active {
      background-color: red;
    }
  </style>
</head>

<body>
  <form method="post" action="http://8.138.146.253:9000/api/register">
    <div class="content">
      <h3>新用户注册</h3>
      <div class="container">
        <input name="username" class="uname" type="text" placeholder="用户名"><br>
        <span class="a1"></span>
        <input name="userphonenumber" class="phone" type="text" placeholder="手机号"><br>
        <span class="a2"></span>
        <input class="yz" type="text" placeholder="验证码"><br>
        <div class="yanzhengma">发送验证码</div>
        <span class="a3"></span>
        <input name="userpassword" class="mima" type="text" placeholder="密码"><br>
        <span class="a4"></span>
        <input class="queren" type="text" placeholder="确认密码"><br>
        <span class="a5"></span><br>
        <div class="box">
          <div class="box1 "></div><span class="sp2">已阅读并同意《用户服务协议》</span>
        </div>
        <input class="last" type="submit">
      </div>
    </div>
  </form>
  <script>
    let count = 5
    let flag = true
    const form = document.querySelector(`form`)
    const yanzhengma = document.querySelector(`.yanzhengma`)
    yanzhengma.addEventListener(`click`, function () {
      yanzhengma.innerHTML = `${count}秒后重新发送`
      if (flag) {
        flag = false

        let id = setInterval(function () {
          count--
          yanzhengma.innerHTML = `${count}秒后重新发送`
          if (count == 0) {
            count = 5
            clearInterval(id)
            yanzhengma.innerHTML = `发送验证码`
            flag = true
          }
        }, 1000)

      }
    })

    const uname = document.querySelector(`.container .uname`)
    const phone = document.querySelector(`.container .phone`)
    const yz = document.querySelector(`.container .yz`)
    const mima = document.querySelector(`.container .mima`)
    const queren = document.querySelector(`.container .queren`)
    const re1 = /^[\w||\d]{6,}$/
    uname.addEventListener(`change`, function () {

      if (!re1.test(uname.value)) {
        const span = document.querySelector(`.container .a1`)
        span.innerHTML = `昵称长度为6到10个字符,不能为汉字`
      } else {
        const span = document.querySelector(`.container .a1`)
        span.innerHTML = ``
      }
    })
    const re2 = /^[0-9]{6,}$/
    phone.addEventListener(`change`, function () {

      if (!re2.test(phone.value)) {
        console.log(1);
        const span = document.querySelector(`.container .a2`)
        span.innerHTML = `请输入正确的手机号`
      } else {
        const span = document.querySelector(`.container .a2`)
        span.innerHTML = ``
      }
    })
    const re3 = /^[0-9]{6,}$/
    yz.addEventListener(`change`, function () {

      if (!re3.test(yz.value)) {
        const span = document.querySelector(`.container .a3`)
        span.innerHTML = `请输入正确的验证码`
      } else {
        const span = document.querySelector(`.container .a3`)
        span.innerHTML = ``
      }
    })
    const re4 = /^[0-9]{6,}$/
    mima.addEventListener(`change`, function () {

      if (!re4.test(mima.value)) {
        const span = document.querySelector(`.container .a4`)
        span.innerHTML = `请输入数字密码`
      } else {
        const span = document.querySelector(`.container .a4`)
        span.innerHTML = ``
      }
    })
    const re5 = /^[0-9]{6,}$/
    queren.addEventListener(`change`, function () {
      if (!re5.test(queren.value)) {
        const span = document.querySelector(`.container .a5`)
        span.innerHTML = `请输入正确的密码`
      } else {
        const span = document.querySelector(`.container .a5`)
        span.innerHTML = ``
      }
    })
    const box1 = document.querySelector(`.container .box .box1`)
    box1.addEventListener(`click`, function () {
      box1.classList.toggle(`active`)
    })
    let yonghuarr = []
    const last = document.querySelector(`.container .last`)
    last.addEventListener(`click`, function (e) {

      let flag = box1.classList.contains(`active`)
      console.log(re1.test(uname.value));
      if (flag && re1.test(uname.value) && re2.test(phone.value) && re3.test(yz.value) && re4.test(mima.value) && re5.test(queren.value)) {
        alert('注册成功')
        // const str = "" + uname.value + "," + mima.value
        // yonghuarr = JSON.parse(localStorage.getItem("用户账号"))
        // yonghuarr.push(str)
        // console.log(yonghuarr);
        // JSON.stringify(yonghuarr)
        // localStorage.setItem("用户账号", JSON.stringify(yonghuarr))
        // form.reset()
        // setTimeout(function () {
        //   location.href = `./zhu.html`
        // }, 700)

      } else if (!flag) {
        e.preventDefault()
        alert(`请先勾选用户同意协议`)
      } else {
        e.preventDefault()
        alert(`请输入正确的用户名或密码`)

      }
    })
  </script>
</body>

</html>